<!--
 	* @author  dumeng
-->
<template>
  <section class="enterprise-join">
    <v-header :backStatus="false">企业入驻申请</v-header>
    <section class="enterprise-main">
      <section class="form-container">
        <img src="./images/title.png" alt="">
        <van-form validate-first @submit="onSubmit" @failed="onFailed" :show-error-message="false" label-align="right">
          <van-field
            v-model="form.enterpriseName"
            name="enterpriseName"
            label="企业名称"
            placeholder="请输入企业名称"
            required
            :rules="[{required: true, message: '请输入企业名称' }]"
          />
          <van-field
            v-model="form.enterpriseCode"
            name="enterpriseCode"
            label="社会统一信用代码"
            placeholder="请输入社会统一信用代码"
            required
            :rules="[{ required: true, message: '请输入社会统一信用代码' }]"
          />
          <van-field
            readonly
            clickable
            is-link
            required
            name="enterpriseType"
            :value="enterpriseTypeName"
            label="企业类型"
            placeholder="请选择企业类型"
            @click="showTypePicker = true"
            :rules="[{ required: true, message: '请选择企业类型' }]"
          />
          <van-field
            readonly
            clickable
            is-link
            required
            name="enterpriseNum"
            :value="enterpriseNumName"
            label="企业人数"
            placeholder="请选择企业人数"
            @click="showNumPicker = true"
            :rules="[{ required: true, message: '请选择企业人数' }]"
          />
          <van-field
            v-model="form.contactName"
            name="contactName"
            label="联系人"
            placeholder="请输入联系人"
            required
            :rules="[{ required: true, message: '请输入联系人' }]"
          />
          <van-field
            v-model="form.contactEmail"
            name="contactEmail"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ validator: validatorEmail, message: '请输入正确的邮箱' }]"
          />
          <van-field
            v-model="form.contactPhoneNumber"
            name="contactPhoneNumber"
            center
            clearable
            required
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="[{ pattern: /^1[0-9]\d{9}$/, message: '请输入正确的手机号码' }]"
          >
            <template #button>
              <span v-if="codeshow" @click="identifying">发送验证码</span>
              <span v-else>{{count}}s后重新获取</span>
            </template>
          </van-field>
          <van-field
            v-model="form.smsCode"
            name="smsCode"
            label="验证码"
            placeholder="请输入验证码"
            required
            :rules="[{ required: true, message: '请输入验证码' }]"
          />
          <div style="margin: 16px;">
            <van-button class="submit" round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </section>

      <van-popup v-model="showTypePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="dict.QYLX"
          value-key="dictName"
          @confirm="onConfirmType"
          @cancel="showTypePicker = false"
        />
      </van-popup>
      <van-popup v-model="showNumPicker" position="bottom">
        <van-picker
          show-toolbar
          value-key="dictName"
          :columns="dict.QYRS"
          @confirm="onConfirmNum"
          @cancel="showNumPicker = false"
        />
      </van-popup>
    </section>
  </section>
</template>

<script>
import VHeader from '@/components/header'
import url from './api'
import { phone, validateEmail } from '@/common/validate'
import { Dialog } from 'vant'
export default {
  name: 'EnterpriseJoin',
  components: { VHeader },
  data() {
    return {
      dict: {
        QYLX: [], // 企业类型
        QYRS: [] // 企业人数
      },
      form: {
        enterpriseName: '',
        enterpriseCode: '',
        enterpriseNum: '',
        enterpriseType: '',
        contactName: '',
        contactEmail: '',
        contactPhoneNumber: '',
        smsCode: ''
      },
      enterpriseNumName: '',
      enterpriseTypeName: '',
      showTypePicker: false,
      showNumPicker: false,
      codeshow: true,
      count: '',
      timer: null
    }
  },
  methods: {
    /**
			 * 发送验证码
			 * */
    identifying() {
      if (!phone(this.form.contactPhoneNumber)) {
        this.$dialog.toast({
          mes: '请输入正确的手机号码',
          timeout: 1500,
          icon: 'none'
        })
        return
      }
      this.$dialog.loading.open('发送中...')
      const phoneStr = this.form.contactPhoneNumber.trim()
      this.$axios.post(url.sendcode, {
        smsType: 5,
        phoneNumber: phoneStr
      }).then(res => {
        this.$dialog.loading.close()
        if (res.code === '200') {
          this.$dialog.toast({
            mes: '短信已发送至您的手机，请注意查收',
            icon: 'none',
            timeout: 1500
          })
          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.codeshow = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.codeshow = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$dialog.toast({
            mes: res.msg || '短信发送失败',
            icon: 'none',
            timeout: 1500
          })
        }
      }).catch(() => {
        this.$dialog.loading.close()
        this.$dialog.toast({
          mes: '短信发送失败',
          icon: 'none',
          timeout: 1500
        })
      })
    },
    onSubmit() {
      this.$openLoading()
      const params = Object.assign({}, this.form)
      this.$axios.post(url.apply, params).then(res => {
        this.$closeLoading()
        if (res.code === '200') {
					Dialog.alert({
						title: '提交成功',
						message: '提交成功，请关闭页面。'
					}).then(() => {
						for (let i in this.form) {
							this.form[i] = ''
            }
						this.enterpriseNumName = ''
            this.enterpriseTypeName = ''
					})
        } else {
          this.$dialog.toast({
            mes: res.msg || '',
            timeout: 1500
          })
        }
      }).catch(err => {
        this.$closeLoading()
      })
    },
    onFailed(errorInfo) {
      if (errorInfo.errors.length > 0) {
        this.$dialog.toast({
          mes: errorInfo.errors[0].message,
          timeout: 1500,
          icon: 'none'
        })
      }
    },
    validatorEmail(val) {
      if (val && !validateEmail(val)) {
        return false
      } else {
        return true
      }
    },
    onConfirmType(val) {
      this.form.enterpriseType = val.id
      this.enterpriseTypeName = val.dictName
      this.showTypePicker = false
    },
    onConfirmNum(val) {
      this.form.enterpriseNum = val.id
      this.enterpriseNumName = val.dictName
      this.showNumPicker = false
    },
    getDict(code) {
      this.$axios.post(url.getDict, { dictCode: code }).then(res => {
        this.dict[code] = (res.data && res.data.length > 0) ? res.data[0].list : []
      })
    }
  },
  created() {
    for (const key in this.dict) {
      this.getDict(key)
    }
  }
}
</script>

<style lang="scss">
  .enterprise-join {
    height: 100%;
    width: 100%;
    position: relative;
    .enterprise-main {
      height: 100%;
      position: absolute;
      top: rem(88);
      bottom: 0;
      left: 0;
      right: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .form-container {
        background: url("./images/bg.png") no-repeat;
        background-size: 100% auto;
        background-color: #eb523c;
        background-position: top;
        padding: rem(440) rem(25) rem(100);
        img {
          width: 100%;
          height: rem(128);
          display: block;
        }
        .van-form {
          border: 4px solid #FFBD48;
          border-radius: rem(28);
          background-color: #FFF0DD;
          position: relative;
          top: rem(-28);
          padding-top: rem(30);
          .van-cell {
            background-color: transparent;
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: rem(20);
            &:before {
              top: rem(20);
              color: #B84E00;
            }
            &:first-child {
              border-radius: rem(28) rem(28) 0 0;
            }
            &:after {
              display: none;
            }
            .van-cell__title {
              width: rem(125);
              text-align: center;
              color: #B84E00;
              font-size: rem(28);
              font-weight: bold;
              display: flex;
              align-items: center;
              margin-right: rem(10);
              line-height: 1.2;
            }
            .van-field__body {
              background-color: #fff;
              border-radius: rem(80);
            }
            .van-field__control {
              height: rem(80);
              padding-left: rem(20);
              border-radius: rem(80);
              &::placeholder {
                color: #DBAA86;
              }
            }
            .van-cell__right-icon {
              position: absolute;
              right: rem(40);
              top: 50%;
              transform: translateY(-50%);
            }
            .van-field__button {
              color: #EB523C;
              font-size: rem(28);
              margin-right: rem(20);
            }
          }
          .submit {
            color: rgba(255, 255, 255, 1);
            @include bg-color($mainColor);
            border: 0 none;
          }

        }
      }
    }
  }
</style>
